<template>
    <page-header-wrapper :title="false">
        <template v-slot:content>
            <div class="page-header-content">
                <div class="avatar">
                    <a-avatar size="large" :src="user.avatar"/>
                </div>
                <div class="content">
                    <div class="content-title">
                        {{user.nickname}}
                    </div>
                    <div>{{user.address}}，{{user.email}}</div>
                </div>
            </div>
        </template>
        <template v-slot:extraContent>
            <!-- <div class="extra-content">
                <div class="stat-item">
                    <a-statistic title="项目数" :value="56" />
                </div>
                <div class="stat-item">
                    <a-statistic title="团队内排名" :value="8" suffix="/ 24" />
                </div>
                <div class="stat-item">
                    <a-statistic title="项目访问" :value="2223" />
                </div>
            </div> -->
        </template>
        <div>
            <a-row :gutter="24" style="margin-bottom: 24px;">
                <a-col :xl="6">
                    <a-card :bordered="false">
                        <div class="order_name">总单量</div>
                        <h2 class="order_num">204398</h2>
                    </a-card>
                </a-col>
                <a-col :xl="6">
                    <a-card :bordered="false">
                        <div class="order_name">总出库量</div>
                        <h2 class="order_num">197672</h2>
                    </a-card>
                </a-col>
                <a-col :xl="6">
                    <a-card :bordered="false">
                        <div class="order_name">未出库单量</div>
                        <h2 class="order_num">1350</h2>
                    </a-card>
                </a-col>
                <a-col :xl="6">
                    <a-card :bordered="false">
                        <div class="order_name">今天出库量</div>
                        <h2 class="order_num">5414</h2>
                    </a-card>
                </a-col>
            </a-row>
            <a-card title="进行中的项目" style="margin-bottom: 24px;" :bordered="false">
                <a-row :gutter="24">
                    <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
                        <line-chart :list="chart"/>
                    </a-col>
                    <a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24"></a-col>
                </a-row>
            </a-card>
            <a-row :gutter="24">
                <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
                    <a-card title="动态" :bordered="false">
                        <table class="dataintable">
                            <tr>
                                <th>属性</th>
                                <th>描述</th>
                            </tr>
                            <tr>
                                <td>border-collapse</td>
                                <td>设置是否把表格边框合并为单一的边框。</td>
                            </tr>
                            <tr>
                                <td>border-spacing</td>
                                <td>设置分隔单元格边框的距离。</td>
                            </tr>
                            <tr>
                                <td>caption-side</td>
                                <td>设置表格标题的位置。</td>
                            </tr>
                            <tr>
                                <td>empty-cells</td>
                                <td>设置是否显示表格中的空单元格。</td>
                            </tr>
                            <tr>
                                <td>table-layout</td>
                                <td>设置显示单元、行和列的算法。</td>
                            </tr>
                        </table>
                    </a-card>
                </a-col>
                <a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
                    <a-card title="XX 指数" style="margin-bottom: 24px;" :bordered="false">
                        <pei-chart/>
                    </a-card>
                </a-col>
            </a-row>
        </div>
    </page-header-wrapper>
</template>

<script>
import peiChart from '@/components/pei-chart.vue'
import lineChart from '@/components/line-chart.vue'
var list = [
    {
        data1: ['芝罘区', '福山区', '莱山区'],
        data2: [10, 8, 7]
    }, {
        data1: ['芝罘区', '莱山区', '福山区'],
        data2: [20, 18, 17]
    }, {
        data1: ['福山区', '芝罘区', '莱山区'],
        data2: [30, 28, 27]
    }, {
        data1: ['福山区', '莱山区', '芝罘区'],
        data2: [46, 40, 36]
    }
]
export default {
    components: {
        peiChart,
        lineChart
    },
    data () {
        return {
            chart: list[0],
            loading: true,
            radarLoading: false,
            activities: [],
            teams: []
        }
    },
    computed: {
        user () {
            return this.$store.state.user
        }
    },
    mounted () {
        // var index = 0
        // setInterval(() => {
        //     console.log(index)
        //     index++
        //     if (index < 4) {
        //         this.chart = list[index]
        //     } else {
        //         index = 0
        //         this.chart = list[0]
        //     }
        // }, 1000)
    },
    methods: {
        i18nRender (t) {
            return t
        }
    }
}
</script>

<style lang="less" scoped>
.clearfix() {
    zoom: 1;
    &::before,
    &::after {
        display: table;
        content: ' ';
    }
    &::after {
        clear: both;
        height: 0;
        font-size: 0;
        visibility: hidden;
    }
}
.page-header-content {
    display: flex;
    .avatar {
        flex: 0 1 72px;
        & > span {
            display: block;
            width: 72px;
            height: 72px;
            border-radius: 72px;
        }
    }

    .content {
        position: relative;
        top: 4px;
        flex: 1 1 auto;
        margin-left: 24px;
        line-height: 22px;

        .content-title {
            margin-bottom: 12px;
            font-weight: 500;
            font-size: 20px;
            line-height: 28px;
        }
    }
}
.scroll-item {
    height: 150px;
    margin-bottom: 20px;
    border-radius: 16px;
    background-image: linear-gradient(130deg, #9457e2, #5029bb);
    transform: perspective(400px);
    box-shadow: 0 8px 20px 0 rgba(108, 79, 197, 0.44);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    div {
        position: absolute;
        left: 20px;
        top: 10px;
        color: #fff;
    }
    h2 {
        text-align: center;
        color: #fff;
        font-size: 40px;
    }
    &.red {
        background-image: linear-gradient(130deg, #ff8063, #e34040);
        box-shadow: 0 8px 20px 0 rgba(213, 65, 51, 0.45);
    }
    &.bees {
        background-image: linear-gradient(130deg, #ffe561, #ffd24c);
        box-shadow: 0 8px 20px 0 rgba(227, 169, 55, 0.45);
    }
    &.blue {
        background-image: linear-gradient(130deg, #1cffb7, #0075ff);
        box-shadow: 0 8px 20px 0 rgba(107, 187, 255, 0.45);
    }
}
.extra-content {
    .clearfix();
    float: right;
    white-space: nowrap;
    .stat-item {
        position: relative;
        display: inline-block;
        padding: 0 32px;

        > p:first-child {
            margin-bottom: 4px;
            line-height: 22px;
        }

        > p {
            margin: 0;
            font-size: 30px;
            line-height: 38px;

            > span {
                font-size: 20px;
            }
        }

        &::after {
            position: absolute;
            top: 8px;
            right: 0;
            width: 1px;
            height: 40px;
            content: '';
        }

        &:last-child {
            padding-right: 0;
            &::after {
                display: none;
            }
        }
    }
}
</style>
